<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/gc.spread.sheets.13.0.0.css">
  <link rel="stylesheet" href="../assets/css/style.css">
  <link rel="stylesheet" href="../build/common/base.css">


  <link rel="stylesheet" href="../build/form/form.css">
  <link rel="stylesheet" href="../build/form/page.css">
  <link rel="stylesheet" href="../build/form/preview.css">
  <link rel="stylesheet" href="../assets/js/plugins/icheck/skins/all.css">


  <link rel="stylesheet" href="../../assets/js/common/element/index.css">
  <script type="text/javascript" src="../build/common/base.js"></script>
  <script type="text/javascript" src="../build/common/vueEdit.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    li {
      list-style: none
    }

    img {
      vertical-align: top;
      border: none
    }

    .rev_file {
      width: 53px;
      height: 33px;
      position: relative;
    }

    .btn_rev {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .fun_box {
      display: flex;
      margin: 15px;

    }

    .my_btns {
      margin-left: 15px;
      width: 53px;
      height: 33px;
    }

    .title {
      border-bottom: 1px #ccc dashed;
      text-align: center;
      font-size: 20px;
      padding-bottom: 20px;
      padding-top: 20px;
      margin-bottom: 20px;
    }

    .execl_box {
      margin: 0 auto;
      padding: 20px;
      margin-bottom: 60px;
    }

    .btn_box {
      display: flex;
      margin-bottom: 20px;
    }

    .btn_file_box {
      position: relative;
      margin-right: 5px;
    }

    .file_up {
      position: absolute;
      top: 0;
    }

    #importUrl {
      z-index: 999;
      opacity: 0;
    }

    .my_name {
      max-width: 230px;
      margin-bottom: 20px;
      margin-left: 8px;
      border-radius: 5px;
    }

    .tab_th tbody th {
      text-align: right;
    }

    .my_table thead th {
      white-space: nowrap;
    }

    /* input[type=file] {
      display: none;
    } */
    .uplad_box input[type=file] {
      display: none;
    }

    .uplad_box {
      margin-bottom: 30px;
    }

    .no_data {
      width: 100%;
      padding: 8px;
      background-color: #f9f9f9;
      text-align: center;

    }

    #barcon {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 16px;
    }

    #barcon2 {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 16px;
    }

    /* #barcon a {
      
    } */
  </style>
</head>

<body>

  <div id="app" style="padding: 30px;">
    <div class="uplad_box">

      <el-upload :on-error="err" :before-upload="beforeUpload" name="name" class="upload-demo" :on-progress="progress"
        :action="url" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess"
        :before-remove="beforeRemove" multiple :limit="3" accept=".xls,.xlsx" :on-exceed="handleExceed"
        :file-list="fileList" accept=".xls,.xlsx">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">仅支持xls/xlsx文件上传</div>
      </el-upload>
    </div>
    <div style="overflow: auto;" class="mb60">
      <table style="margin-bottom: 0;" class="my_table table table-striped table-bordered table_hover text-center">
        <thead>
          <tr>
            <!-- <th>项目预算id</th> -->
            <th>追加</th>
            <th>替换</th>
            <th>任务编号</th>
            <th>任务名称</th>
            <th>一级目录</th>
            <th>二级目录</th>
            <th>三级目录</th>
            <th>备注</th>
            <th>数量</th>
            <th>单位</th>
            <th>人工工时(小时)</th>
            <th>人工费</th>
            <th>材料</th>
            <th>分包</th>
            <th>机具</th>
            <th>其他</th>
            <th>合计(元)</th>
            <th>合同额</th>
            <th>税额</th>
            <th>含税合计</th>
            <th>状态</th>
            <th>子项目</th>
          </tr>
        </thead>
        <tbody id="idData">
          <tr v-for="(item, index) in exList" :key="index">
            <td><input type="radio" :name="item.id" value="1" @change="updateIds($event,item)"></td>
            <td><input type="radio" :name="item.id" value="2" @change="updateIds($event,item)"></td>
            <td>{{item.taskNumber}}</td>
            <td>{{item.taskName}}</td>
            <td>{{item.first}}</td>
            <td>{{item.Second}}</td>
            <td>{{item.Third}}</td>
            <td>{{item.bz}}</td>
            <td>{{item.number}}</td>
            <td>{{item.dw}}</td>
            <td>{{item.hours}}</td>
            <td>{{item.Cost}}</td>
            <td>{{item.cl}}</td>
            <td>{{item.fb}}</td>
            <td>{{item.tool}}</td>
            <td>{{item.qt}}</td>
            <td>{{item.hj}}</td>
            <td>{{item.hte}}</td>
            <td>{{item.se}}</td>
            <td>{{item.hshj}}</td>
            <td>{{item.status}}</td>
            <td>{{item.zxm}}</td>
          </tr>
        </tbody>

      </table>
      <div v-if="exList.length==0" class="no_data">暂无数据</div>
      <table width="60%" align="right">
        <tr>
          <td>
            <div id="barcon" name="barcon"></div>
          </td>
        </tr>
      </table>
    </div>
    <div style="overflow: auto;" class="mb60">
      <table style="margin-bottom: 0;" class="my_table table table-striped table-bordered table_hover text-center">
        <thead>
          <tr>

            <th>任务编号</th>
            <th>任务名称</th>
            <th>报价单价</th>
            <th>保价金额</th>
            <th>备注</th>
            <th>数量</th>
            <th>单位</th>
            <th>人工工时(小时)</th>
            <th>人工费</th>
            <th>材料</th>
            <th>分包</th>
            <th>机具</th>
            <th>其他</th>
            <th>合计(元)</th>
            <th>合同额</th>
            <th>税额</th>
            <th>含税合计</th>
            <th>状态</th>
            <th>子项目</th>
          </tr>
        </thead>
        <tbody id="idData2">
          <tr v-for="(item, index) in exLists" :key="index">
            <td>{{item.taskNumber}}</td>
            <td>{{item.taskName}}</td>
            <td>{{item.offerPrice}}</td>
            <td>{{item.offerMoney}}</td>
            <td>{{item.bz}}</td>
            <td>{{item.number}}</td>
            <td>{{item.dw}}</td>
            <td>{{item.hours}}</td>
            <td>{{item.Cost}}</td>
            <td>{{item.cl}}</td>
            <td>{{item.fb}}</td>
            <td>{{item.tool}}</td>
            <td>{{item.qt}}</td>
            <td>{{item.hj}}</td>
            <td>{{item.hte}}</td>
            <td>{{item.se}}</td>
            <td>{{item.hshj}}</td>
            <td>{{item.status}}</td>
            <td>{{item.zxm}}</td>
          </tr>
        </tbody>

      </table>
      <div v-if="exList.length==0" class="no_data">暂无数据</div>
      <table width="60%" align="right">
        <tr>
          <td>
            <div id="barcon2" name="barcon"></div>
          </td>
        </tr>
      </table>
    </div>
    <div style="text-align: center;">
      <span @click="handSub()" class="btn btn-success fa fa-send mb30 mt30">提交</span>
      <span @click="handclos()" class="btn btn-success fa fa-times mb30 mt30">取消</span>
    </div>

  </div>

  <script src="./lib/FileSaver.js"></script>
  <script src="./lib/gc.spread.sheets.all.13.0.0.min.js"></script>
  <script src="./lib/gc.spread.excelio.13.0.0.min.js"></script>
  <script src="./lib/gc.spread.sheets.migration.13.0.0.min.js"></script>
  <script src="./lib/gc.spread.sheets.resources.zh.13.0.0.min.js"></script>
  <script src="../../assets/js/common/element/index.js"></script>
  <script>
    function goPages(pno, psize) {
      // if (dom == 1) {
      var itable = document.getElementById("idData2");
      // }
      // if (dom == 2) {
      // }

      // var itable = dom;
      var num = itable.rows.length;//表格所有行数(所有记录数)
      console.log(num);
      var totalPage = 0;//总页数
      var pageSize = psize;//每页显示行数
      //总共分几页 
      if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
      } else {
        totalPage = parseInt(num / pageSize);
      }
      var currentPage = pno;//当前页数
      var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  31 
      var endRow = currentPage * pageSize;//结束显示的行   40
      endRow = (endRow > num) ? num : endRow; 40
      console.log(endRow);
      //遍历显示数据实现分页
      for (var i = 1; i < (num + 1); i++) {
        var irow = itable.rows[i - 1];
        if (i >= startRow && i <= endRow) {
          // irow.style.display = "block";
          $(irow).show()
        } else {
          $(irow).hide()
          // irow.style.display = "none";
        }
      }
      var pageEnd = document.getElementById("pageEnd");
      var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
      if (currentPage > 1) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPages(" + (1) + "," + psize + ")\">首页</a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPages(" + (currentPage - 1) + "," + psize + ")\"><上一页</a>"
      } else {
        tempStr += "首页";
        tempStr += "<上一页";
      }

      if (currentPage < totalPage) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPages(" + (currentPage + 1) + "," + psize + ")\">下一页></a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPages(" + (totalPage) + "," + psize + ")\">尾页</a>";
      } else {
        tempStr += "下一页>";
        tempStr += "尾页";
      }

      // document.getElementById("barcon").innerHTML = tempStr;
      document.getElementById("barcon2").innerHTML = tempStr;

    }
    function goPage(pno, psize) {
      // if (dom == 1) {
      var itable = document.getElementById("idData");
      // }
      // if (dom == 2) {
      // }

      // var itable = dom;
      var num = itable.rows.length;//表格所有行数(所有记录数)
      console.log(num);
      var totalPage = 0;//总页数
      var pageSize = psize;//每页显示行数
      //总共分几页 
      if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
      } else {
        totalPage = parseInt(num / pageSize);
      }
      var currentPage = pno;//当前页数
      var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  31 
      var endRow = currentPage * pageSize;//结束显示的行   40
      endRow = (endRow > num) ? num : endRow; 40
      console.log(endRow);
      //遍历显示数据实现分页
      for (var i = 1; i < (num + 1); i++) {
        var irow = itable.rows[i - 1];
        if (i >= startRow && i <= endRow) {
          // irow.style.display = "block";
          $(irow).show()
        } else {
          $(irow).hide()
          // irow.style.display = "none";
        }
      }
      var pageEnd = document.getElementById("pageEnd");
      var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
      if (currentPage > 1) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a>"
      } else {
        tempStr += "首页";
        tempStr += "<上一页";
      }

      if (currentPage < totalPage) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页></a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
      } else {
        tempStr += "下一页>";
        tempStr += "尾页";
      }

      // document.getElementById("barcon").innerHTML = tempStr;
      document.getElementById("barcon").innerHTML = tempStr;

    }
    var vm = new Vue({
      el: "#app",
      data: {
        surbeyObj: "",
        exLists: [],
        id: "",
        rwid: "",
        fileList: [],
        exList: [],
        loading: Number,
        ids: "",
        bzTxt: "",
        url: "http://127.0.0.1:18084/project/appendReduce/",
        projectbudget: {
          code: "",
          registerTime: "",
          OnlyID: "",
          bz: "",
          projectName: "",
          userName: "",
          BudgetName: ""
        },
        yusuandanTxt: "",
        checked: false
      },
      mounted() {

        this.rwid = location.search.replace("?", "")
        // this.url = this.url + this.rwid
        this.url = this.url + this.rwid
        console.log("=====", this.rwid)
        var that = this
      },
      methods: {
        //提交
        handSub: function () {
          var that = this
          var url = "http://127.0.0.1:18084/project/sumbitAppendReduce";
          $.ajax({
            url: url,
            type: "post",
            // dataType: "json",
            traditional: true,
            async: false,
            data: { list: JSON.stringify(this.exList) },
            success: function (res) {
              // $.Toast.success("通过审核")
              $.Toast.success("保存成功")
              var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
              parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
              parent.layer.close(index);
            }
          })
        },
        handclos: function () {
          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
          parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
          parent.layer.close(index);
        },
        updateIds: function ($event, item) {
          // $event === item.id ? item.id = '' : item.id = $event
          item.append = $event.target.value
          console.log("添加追加减", item)
          // if ($event.target.checked) {
          //   // this.selectIds.push(CardNo);
          // } else {
          //   // var idx1 = this.selectIds.indexOf(CardNo);
          //   // this.selectIds.splice(idx1, 1);
          // }
        },
        err() {
          layer.close(this.loading)
          $.Toast.error('上传失败');
        },
        progress() {
          this.loading = layer.load();

          // console.log("这个啥类型的", loading)
        },
        //成功的回调
        handleSuccess(response, file, fileList) {
          console.log("回调===>>>", response)
          this.exList = response.update
          this.exLists = response.zhengchang
          for (let i = 0; i < this.exList.length; i++) {
            this.exList[i].append = ""
          }


          layer.close(this.loading)
          this.$nextTick(function () {
            // console.log("wwwdsadasdasd", document.getElementById("idData"))
            // var dom = document.getElementById("idData")
            goPage(1, 10);
            goPages(1, 10);
            // goPage(1, 10);
            // goPage(1, 10, document.getElementById("idData2"), document.getElementById("barcon2"));
            //dom已更新
          })



        },
        beforeUpload(file) {
          console.log(file)
          var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
          const extension = testmsg === 'xls'
          const extension2 = testmsg === 'xlsx'
          const isLt2M = file.size / 1024 / 1024 < 10
          if (!extension && !extension2) {
            this.$message({
              message: '上传文件只能是 xls、xlsx格式!',
              type: 'warning'
            });
          }
          if (!isLt2M) {
            this.$message({
              message: '上传文件大小不能超过 10MB!',
              type: 'warning'
            });
          }
          return extension || extension2 && isLt2M
          return extension || extension2
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        }
      },
      watch: {

      }
    })







  </script>
</body>

</html>